<template>
	<!-- 联赛排行榜 -->
	<view class="container">
		<uni-nav-bar class="ch-nav navborder" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">联赛排行榜</text>
			<template slot="right"></template>
		</uni-nav-bar>
		<scroll-view
			class="scroll-Y" 
			refresher-default-style="none" 
			:scroll-y="true"
			:scroll-top="scrollTop"
			:refresher-triggered="refreshing"
			:refresher-enabled="true" 
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
		>
		<view class="body">
			<ExpertRank :list="season" @scroll="pageScroll">
				<EmptyContent top="200rpx" text="暂无内容" img="qsy_zwxl" :showRefresh="requestError" @refresh="getSeason"></EmptyContent>
			</ExpertRank>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: -1,
				navBorder: false,
				refreshing: false,
				
				season: [],
				requestError: false
			}
		},
		components: {
			ExpertRank: () => import("./components/ch-expert/ch-expertrank.vue")
		},
		onLoad() {
			this.getSeason()
		},
		methods: {
			//下拉刷新
			refresh() {
				this.refreshing = true
				this.getSeason()
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			getSeason(){
				this.$http.get({
					url: '/api/appUser/queryMatchSeasonRows'
				}).then((data)=>{
					console.log(data);
					if(data.success){
						this.season = data.result || []
					}else{
						this.requestError = true
					}
				})
			},
			pageScroll(data) {
				console.log(data);
				this.scrollTop = data.top
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
		.scroll-Y{
			height: calc(var(--safe-height) - #{$navbar-height});
		}
	}
</style>
